<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>浏览器的消息通知</title>
  <!-- 必须在https中才可以使用的 -->
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
  </style>
</head>

<body>
</body>
<script>
  "use strict"; {
    document.addEventListener("DOMContentLoaded", () => {
      if (!Object.hasOwn(window, "Notification")) return void alert(`你的浏览器不支持消息通知`);
      Notification.requestPermission(res => {
        if (res == "denied") return void console.info(`%c用户拒绝通知`, `color: #fa3534; font-family: kaiti`);
        if (res == "granted") console.info(`%c用户允许通知`, `color: #19be6b; font-family: kaiti`);
        let notification = new Notification("这里是哪里呀!", {
          "icon": "../favicon.ico",
          "dir": "auto",
          "tag": +new Date(),
          "renotify": true,
          "silent": true,
          "body": "感谢你的点击事件",
        });
        notification.addEventListener("click", () => {
          console.log(`好呢了`);
          notification.close();//关闭桌面通知
        });
        notification.addEventListener("close", res => {
          console.log(res.target);
        });
        notification.addEventListener("error", err => console.err(`桌面通知发生了错误: ${JSON.stringify(err)}`));
        notification.addEventListener("show", () => console.log(`桌面通知显示`));
      });
    });
  };
</script>

</html>